"use strict";

import { ICustomPanelThis, ITaskOptions } from "../@types";
import { PACKAGE_NAME } from "./global";
let panel: ICustomPanelThis;

export const style = ``;

export const template = `
<div class="build-plugin">
    <ui-prop>
        <ui-label slot="label" value="是否开启压缩纹理"></ui-label>
        <ui-checkbox slot="content" id="compressedTexture"></ui-checkbox>
    </ui-prop>
</div>
`;

export const $ = {
    root: ".build-plugin",
    compressedTexture: "#compressedTexture",
};

/**
 * all change of options dispatched will enter here
 * @param options
 * @param key
 * @returns
 */
export async function update(options: ITaskOptions, key: string) {
    if (key) {
        return;
    }
    // when import build options, key will bey ''
    init();
}

export function ready(options: ITaskOptions) {
    // @ts-ignore
    panel = this as ICustomPanelThis;
    panel.options = options;
    init();
}

export function close() {
    panel.$.compressedTexture.removeEventListener("change", onCompressedTextureChange);
}

function init() {
    // 添加事件监听器
    initCompressedTexture();
}
function initCompressedTexture() {
    let isOpen = localStorage.getItem("isCompressedTexture");
    if (isOpen == "1") {
        panel.options.compressedTexture = true;
    } else {
        panel.options.compressedTexture = false;
    }

    panel.$.compressedTexture.value = panel.options.compressedTexture;
    updateCompressedTexture();
    panel.$.compressedTexture.addEventListener("change", onCompressedTextureChange);
}

function onCompressedTextureChange(event: any) {
    panel.options.compressedTexture = event.target.value;
    panel.dispatch("update", `packages.${PACKAGE_NAME}.compressedTexture`, panel.options.compressedTexture);
    updateCompressedTexture();
}
function updateCompressedTexture() {
    if (panel.options.compressedTexture) {
        localStorage.setItem("isCompressedTexture", "1");
    } else {
        localStorage.setItem("isCompressedTexture", "0");
    }
}
